<template>
	<main-content
		:classType="'wrapInnerWOC'"
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-row>
				<el-col :span="4" class="backgroundTitelBox">
					{{ $t('agent.login_info') }}
				</el-col>
				<el-col :span="2" class="refrestBox">
					<el-button
						type="primary"
						icon="el-icon-refresh"
						@click="refresh"
					>
						{{ $t('common.refresh') }}
					</el-button>
				</el-col>
			</el-row>
		</template>

		<template slot="content">
			<div
				v-if="activeL"
				style="
                height: 350px;
                line-height: 350px;
                text-align: center;
                font-size: 28px;
            "
			>
				<i class="el-icon-loading"></i>
			</div>
			<div v-else style="width: 100%">
				<el-table
					border
					size="mini"
					class="small-size-table"
					:data="dataList"
					:header-row-style="{ height: '24px', lineHeight: '24px' }"
					style="margin: 10px 0 30px 0; z-index: 0"
					:header-cell-style="getRowClass"
					highlight-current-row
					:max-height="tableHeight"
				>
					<el-table-column
						align="center"
						prop="loginTime"
						:label="$t('agent.login_time')"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.loginTime || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="loginStatus"
						align="center"
						:label="$t('agent.status')"
						width="80"
					>
						<template slot-scope="scope">
							<span v-if="scope.row.loginStatus === '1'">
								{{
									typeFilter(
										scope.row.loginStatus,
										'loginStatusType'
									)
								}}
							</span>
							<span v-else class="redColor">
								{{
									typeFilter(
										scope.row.loginStatus,
										'loginStatusType'
									)
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="loginIp"
						align="center"
						:label="$t('agent.ip_address')"
					>
						<template slot="header">
							{{ $t('agent.ip_address') }}
							<br />
							{{ $t('common.risk_control_level') }}
						</template>
						<template slot-scope="scope">
							<span v-if="scope.row.loginIp !== null">
								{{ scope.row.loginIp }}
							</span>
							<span v-else>-</span>
							<br />
							<span class="redColor">
								{{ $t('common.risk_control_level') }}：{{
									scope.row.ipControlName === null
										? $t('agent.none')
										: scope.row.ipControlName
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="ipAttribution"
						align="center"
						:label="$t('agent.ip_attribute')"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.ipAttribution || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="loginReference"
						align="center"
						:label="$t('agent.login_link')"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.loginReference || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="deviceType"
						align="center"
						:label="$t('agent.login_terminal')"
					>
						<template slot-scope="scope">
							{{ typeFilter(scope.row.deviceType, 'deviceType') }}
						</template>
					</el-table-column>
					<el-table-column
						prop="deviceNo"
						align="center"
						:label="$t('agent.device_number')"
					>
						<template slot="header">
							{{ $t('agent.device_number') }}
							<br />
							{{ $t('common.risk_control_level') }}
						</template>
						<template slot-scope="scope">
							<span v-if="scope.row.deviceNo !== null">
								{{ scope.row.deviceNo }}
							</span>
							<span v-else>-</span>
							<br />
							<span class="redColor">
								{{ $t('common.risk_control_level') }}：{{
									scope.row.deviceNoControlName === null
										? $t('agent.none')
										: scope.row.deviceNoControlName
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="browseContent"
						align="center"
						:label="$t('agent.device_version')"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.browseContent || '-' }}</span>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					class="pageValue"
					:current-page.sync="page"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="size"
					:page-sizes="[10, 20, 50, 100, 200]"
					:total="total"
					:pager-count="9"
					style="float: right; padding-top: 10px"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</div>
			<el-divider></el-divider>
		</template>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import MainContent from '@/components/MainContent/index.vue'
// import dayjs from 'dayjs'
export default {
	components: {
		MainContent
	},
	mixins: [list],
	props: {
		parentData: { type: Object, default: () => ({}) },
		lonRecord: { type: Object, default: () => ({}) }
	},
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: ['wrapInnerTab'],
			activeL: false,
			page: 1,
			size: 100,
			dataList: []
		}
	},
	computed: {},
	watch: {
		parentData: {
			handler() {
				this.refresh()
			},
			deep: true
		},
		lonRecord: {
			handler(newV) {
				if (newV.totalRecord) {
					this.total = newV.totalRecord
					this.dataList = newV.record
				} else {
					this.total = 0
					this.dataList = []
				}
			},
			deep: true
		}
	},
	created() {
		this.refresh()
	},
	mounted() {},
	methods: {
		// 登录日志查询
		getProxyDetailProxyLoginLog(val) {
			this.activeL = true
			this.dataList = []
			const params = {
				userName: val,
				pageNum: this.page,
				pageSize: this.size
			}
			this.$api.getProxyDetailProxyLoginLog(params).then((res) => {
				if (res?.code === 200) {
					this.dataList = res?.data?.record || []
					this.total = res?.data?.totalRecord || 0
					this.activeL = false
				} else {
					this.total = 0
					this.dataList = []
					this.activeL = false
				}
			})
		},
		refresh() {
			this.page = 1
			this.size = 100
			this.getProxyDetailProxyLoginLog(this.parentData.userName)
		},
		handleCurrentChange(val) {
			this.page = val
			if (this.parentData.userName !== null) {
				this.getProxyDetailProxyLoginLog(this.parentData.userName)
			}
		},
		handleSizeChange(val) {
			this.page = 1
			this.size = val
			if (this.parentData.userName !== null) {
				this.getProxyDetailProxyLoginLog(this.parentData.userName)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
#basicInformation {
	font-size: 14px;
	line-height: 40px;
	min-height: 400px;
	padding-top: 10px;
}
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
.backgroundTitelBox {
	line-height: 40px;
	width: 188px;
	height: 40px;
	text-align: center;
	background: #000;
	color: rgb(255, 255, 255);
}
.refrestBox {
	text-align: center;
	margin: 0 10px;
}
.clear {
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0;
}
.pageValue {
	text-align: right;
}
</style>
